<template>
	
	<view class="detailsFa">
		<view class="detailsTop">
			<view class="detailsTop_1">
			    <view><text style="font-weight :bolder ">编号：</text>{{ orders.id }}</view>
			    <view><text style="font-weight :bolder ">商家：</text>{{ orders.shop_name }}</view>
			</view>
			<view class="detailsTop_2">
			    <view><text style="font-weight :bolder ">时间：</text>{{ orders.createtime }}</view>
			    <view><text style="font-weight :bolder ">总价：</text>{{ orders.price }}元</view>
			</view>
		</view>
	
		
		<view class="detailsMid">
			<view class="detailsMid_1" v-for="item in orders.goods" :key="item.ss">
				<view class="detailsMid_1_1">
					<view>商品：{{ item.goods_name }}</view>
					<view>类型：{{ item.varietys }}</view>
				</view>
				<view class="detailsMid_1_2">
					<view>个数：{{ item.count }}{{ item.unit_name }}</view>
					<view>价格：{{ item.gjprices }}元</view>
				</view>
			</view>
		</view>
		
	</view>
   
</template>
 
<script setup>
import { ref,onMounted } from "vue";

import {http} from '/until/request.js'
const orders = ref({});

// 	onMounted((id) => {
// console.log(id)

// 	});
onMounted((oid) => {
	const pages = getCurrentPages();
	  const currentPage = pages[pages.length - 1];
	  const options = currentPage.options;
	  console.log(options.oid)
	  
 fetchOrders5(options.oid)
});	

	const fetchOrders5 = async (oid) => {
		const response = await http({
			url: '/orders/selectorder1/'+oid,
			// url: '/orders/selectorder1/'+79385,
			method: 'get',
		});
		if (response.data) {
	    console.log(response.data)
		orders.value=response.data
		}
	};
</script>

<style lang="scss">
	
.detailsTop{
	// border: 1px solid red;
	background-color: #d9edfc;
	
	.detailsTop_1 {
		// border: 1px solid blueviolet;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between; /* 或者使用 space-around，但 space-between 通常在两端对齐时更常用 */
	    align-items: center; /* 垂直方向居中对齐 */
	    width: 100%; /* 或者设置为其他合适的宽度 */
	    padding: 10rpx; /* 可选，增加内边距 */
	    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
	}
	
	.detailsTop_2 {
		margin-top: 20rpx;
		// border: 1px solid hotpink;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between; /* 或者使用 space-around，但 space-between 通常在两端对齐时更常用 */
	    align-items: center; /* 垂直方向居中对齐 */
	    width: 100%; /* 或者设置为其他合适的宽度 */
	    padding: 10rpx; /* 可选，增加内边距 */
	    box-sizing: border-box; /* 确保内边距和边框包含在宽度内 */
	}
}

.detailsMid{
	// border: 1px solid red;
	.detailsMid_1 {
		width: 90%;
		height: 130rpx;
		margin: 40rpx auto; /* 使用简写方式同时设置上下和左右的外边距 */
		display: flex;
		flex-direction: column;
		gap: 20rpx; /* 使用 gap 属性设置子元素之间的间距 */
		box-shadow: 8px 5px 5px rgba(117, 160, 208, 0.3);
	}
	
	.detailsMid_1_1 {
		width: 94%;
		margin-left: 20rpx;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between; /* 或者使用 space-around，但 space-between 通常在两端对齐时更常用 */
	    align-items: center; /* 垂直方向居中对齐 */
		
	}
	
	.detailsMid_1_2 {
		// border: 1px solid red;
		width: 94%;
		margin-left: 20rpx;
	    display: flex;
	    flex-direction: row;
	    justify-content: space-between; /* 或者使用 space-around，但 space-between 通常在两端对齐时更常用 */
	    align-items: center; /* 垂直方向居中对齐 */
		
	}
	
	
}



/* 如果需要，可以为文本设置特定的对齐方式 */
.hh view, .xx view {
    text-align: left; /* 或者 right、center，根据需要选择 */
}
</style>
